<template>
  <!-- 台账记录 -->
  <el-table
    ref="dataTableRef"
    :data="contractItems"
    height="40vh"
    :cell-class-name="handleLineClass"
  >
    <el-table-column align="center" width="40">
      <template #default="scope">
        <el-icon :color="scope.row.operation === 3 ? 'red' : 'green'">
          <Plus v-if="scope.row.operation === 1" />
          <EditPen v-if="scope.row.operation === 2" />
          <Minus v-if="scope.row.operation === 3" />
        </el-icon>
      </template>
    </el-table-column>
    <el-table-column label="材料类型" align="center" width="90">
      <template #default="scope">
        {{ SaleMealTypeLabel[scope.row.itemType] }}
      </template>
    </el-table-column>
    <el-table-column label="材料名称" prop="name" width="200" />
    <el-table-column label="规格" prop="spec" />
    <el-table-column label="单位" prop="unit" align="center" width="80" />
    <el-table-column label="数量" align="center" prop="quantity" width="100">
      <template #default="scope">
        <div v-if="scope.row.operation === 2 && scope.row.originalItem.quantity">
          <del>{{ scope.row.originalItem.quantity }}</del>
          &nbsp;
          <span style="color: red">{{ scope.row.quantity }}</span>
        </div>
        <span v-else>{{ scope.row.quantity }}</span>
      </template>
    </el-table-column>
    <el-table-column label="单价" align="center" prop="price" width="180">
      <template #default="scope">
        <div v-if="scope.row.operation === 2 && scope.row.originalItem.price">
          <del>{{ `￥${scope.row.originalItem.price}` }}</del>
          &nbsp;
          <span style="color: red">{{ `￥${scope.row.price}` }}</span>
        </div>
        <span v-else>{{ `￥${scope.row.price}` }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { SaleMealTypeLabel } from "@/api/business/material/sealMeal.api";
import {
  ContractLedgerRecord,
  ContractLedgerRecordCompare,
  ContractLedgerRecordItem,
} from "@/api/flow/contractLedger.api";
import { cloneDeep } from "lodash-es";

const props = defineProps<{
  data?: ContractLedgerRecord;
  oldData?: ContractLedgerRecordItem[];
}>();

const contractItems = ref<ContractLedgerRecordCompare[]>([]); //合同材料变动列表

watch(
  () => props.data,
  (val) => {
    if (!val) return;
    compareData();
  },
  {
    immediate: true,
    deep: true,
  }
);

/**
 * 对比变动数据
 */
function compareData() {
  const newItems = cloneDeep(props.data!.items);
  const oldItems = cloneDeep(props.oldData);
  newItems.forEach((m) => {
    const compItem: ContractLedgerRecordCompare = cloneDeep(m);
    const oldItem = oldItems?.find((o) => o.resourceId === m.resourceId);
    if (!oldItem) {
      // 1-新增
      compItem.operation = 1;
    } else {
      // 2-修改
      const listenParams = ["quantity", "price"]; //监听参数
      listenParams.forEach((param) => {
        if (m[param] != oldItem[param]) {
          compItem.operation = 2;
          compItem.originalItem ||= {}; //变动项原始值
          compItem.originalItem[param] = oldItem[param];
        }
      });
    }
    contractItems.value.push(compItem);
  });
  oldItems
    ?.filter((m) => {
      return !newItems.some((n) => n.resourceId === m.resourceId);
    })
    .forEach((item) => {
      const compItem: ContractLedgerRecordCompare = { ...item, operation: 3 };
      contractItems.value.push(compItem);
    });
}

// 行样式
function handleLineClass({ row }: ContractLedgerRecordCompare) {
  if (row.operation === 1) {
    return "add";
  }
  if (row.operation === 3) {
    return "delete";
  }
  return "";
}
</script>

<style lang="scss" scoped>
:deep(.el-table__body td.el-table__cell) {
  &.add {
    background-color: #daffc6;
  }
  &.delete {
    background-color: #ffd3d3;
  }
}
</style>
